<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
    <style>
        #todoapp {
            width: 500px;
            margin: auto;
            text-align: center;
        }
        
        .new-todo {
            width: 400px;
            height: 30px;
            color: #333;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
        
        .main {
            border: 1px solid #999;
            width: 408px;
            margin: auto;
        }
        
        .main span {
            float: left;
        }
        
        .footer {
            border: 1px solid #999;
            width: 408px;
            height: 36px;
            margin: auto;
        }
        
        .changeyanse {
            color: red;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 主体部分 -->
    <section id="todoapp">
        <header class="header">
            <h1>小黑记事本</h1>
            <input type="text" v-model="introduce" @keyup.enter="add" value="请输入任务" autocomplete="off" autofocus="autofocus" class="new-todo">
        </header>
        <!-- 列表区域 -->
        <section class="main" v-for="(item,index) in arr">
            <span class="index"> {{index+1}} </span>
            <label for="" class="item"> {{item}} </label>
            <span style="float: right; margin-right: 10px;" :class="Changeyanse?'changeyanse':''" @click="remove(index)" @mouseenter="changecolor" @mouseleave="returncolor">x</span>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer">
            <span style="float: left; line-height: 36px;margin:0 5px;" v-show="arr.length>0"> {{arr.length}} </span>
            <span style="float:left; line-height: 36px;" v-if="arr.length>0">items lift</span>
            <span style="float: right; line-height: 36px; margin-right: 10px;" @click="removeall" v-show="arr.length>0">Clearf</span>
        </footer>
        <!-- 底部 -->
        <footer class="inof"></footer>

    </section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var todoapp = new Vue({
        el: "#todoapp",
        data: {
            arr: ["学习使我快乐", "加油", "可以的"],
            introduce: "好好学习，天天向上",
            Changeyanse: false,

        },
        methods: {
            //添加元素、
            add: function() {
                this.arr.push(this.introduce)
            },
            changecolor: function() {
                this.Changeyanse = true;
            },
            returncolor: function() {
                this.Changeyanse = false;
            },
            remove: function(index) {
                this.arr.splice(index, 1) //删除一个指定的元素
            },
            removeall: function() {
                this.arr = []
            }
        }
    })
</script>

</html>